<template>
	<view class="">
		<view class="" style="width: 100%;height: 100%;position: absolute;z-index:10;top: 0;">
			<image style="width: 100%;height: 100%;" src="../static/images/living_over.png" mode=""></image>
		</view>
		<view class="wrap">
			<view :style="{ height: iStatusBarHeight + 'px'}"></view>
			<view style="padding-top: 30upx;" class="title">主播名称：{{Info.member_name}}</view>
			<view class="title">直播标题：{{Info.title}}</view>
			<view class="user">
				<image style="width: 160upx;height: 160upx;border-radius: 50%;" 
				:src="Info.member_avatar" mode=""></image>
				<view class="username">{{Info.member_name}}</view>
				<view class="roomnum">房间号：{{Info.room_number}}</view>
				<view class="over">直播已结束</view>
				<view class="time">直播时长：{{Info.long_time}}</view>
			</view>
			<view class="livedata">
				<view class="livedata1">
					<view class="watchnum">
						{{Info.visits}}
					</view>
					<view class="watch">
						观看人数
					</view>
				</view>
				<view class="livedata1">
					<view class="watchnum">
						{{Info.like_num}}
					</view>
					<view class="watch">
						获赞
					</view>
				</view>			
			</view>
			<view class="same">直播已结束</view>
			 
			<!-- <view class="samelive">			 
				<view  @click="seylive(item.room_id,item.play_url,item.room_number)" v-for="(item,index) in Info.recommendRoomList" :key="index" class="livedata1">
					<image style="width: 130upx;height: 130upx;border-radius: 50%;" 
					:src="item.member_avatar" mode=""></image>
					<view class="watch">
						{{item.member_name}}
					</view>
				</view>
			</view> -->
			
			<view @click="back" class="btn">
				退出直播间
			</view>
		</view>
	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Info:"",
				iStatusBarHeight:0,
				room_id:"",
				gift_total_num:"",
				like_num:"",
				long_time:"",
				member_avatar:"",
				member_name:"",
				room_number:"",
				recommendRoomList:"",
				visits:"",
				project_name:"",
				title:""
			}
		},
		onLoad(e){
			 this.room_id=e.room_id
			 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight 
			 this.getData()
		},
		methods:{	
			seylive(room_id,url_flv,room_number){
				uni.setStorageSync("flv",url_flv);
				uni.redirectTo({ 
					url:'/pages/homePages/seyliveed?room_id='+room_id+'&room_number='+room_number
				})
			},
			back(){
				let pages = getCurrentPages(); // 获取页面栈
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.navigateTo({
						url: '/live/live/index'
					})
				}
			},
			getData(){
				let that=this
				this.$util.request({
						url: '/mobile/index.php?act=live&op=closeLiveRoom',
						method: 'POST',
						ToLogin:false,
						data: {
							room_id:this.room_id
						},
					}).then((res)=> {
						if(res.error_code==0){		
							this.Info = res.datas
						}
					})	
			}
			
		}
		
	}
</script>

<style>
	.wrap{
		width: 100%; 
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 100;
		overflow: hidden;
	} 
	.title{
		color: #fff;
		padding-left: 20upx;
		font-size: 26upx;
	}
	.status_bar{
		height: var(-state-bar-height);
	}
	.user{
		margin: 50upx auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.username{
		margin: 30upx auto 10upx;
		color: #fff;
		font-size: 28upx;
	}
	.roomnum{
		color: #eee;
		font-size: 26upx;
	}
	.over{
		margin-top: 30upx;
		font-size: 40upx;
		color: #FFA029;
		font-weight: 400;
	}
	.time{
		color: #eee;
		font-size: 28upx;
	}
	.livedata{
		text-align: center;
		padding: 10upx 50upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	}
	.watch{
		color: #eee;
		font-size: 28upx
	}
	.watchnum{
		color: #f00;
		font-size: 28upx
	}
	.same{
		text-align: center;
		margin-top: 50upx;
		font-size: 40upx;
		color: #fff;
		font-weight: 400;
	}
	.samelive{
		margin-top: 30upx;
		text-align: center;
		padding: 10upx 50upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	}
	.btn{
		width: 710upx;
		margin: 20upx auto;
		font-size: 38upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background-image: linear-gradient(to right, rgb(255,160,44),rgb(255,75,60));
		border-radius: 40upx;
		color: #fff;
	}
</style>
